<template>
  <view class="c-wrapper">
    <view class="bg">
      <image mode="widthFix" src="../../static/bar/bar1.jpeg" @error="imageError"></image>
    </view>

    <!-- 倒计时器 -->
    <view class="countdown">
      <text class="title">距离荔枝上市大约还剩</text>

      <uni-countdown
        :font-size="20"
        :day="60"
        :hour="2"
        :minute="30"
        :second="0"
        color="#FFFFFF"
        background-color="#f3a73f"
        splitorColor="#fff"
      />
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.c-wrapper {
  height: 300upx;
  position: relative;
}

.bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  image {
    width: 100%;
  }
}

.countdown {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .title {
    margin-bottom: 30upx;
    font-size: 40upx;
    color: rgba($color: #fff, $alpha: 1);

    letter-spacing: 10upx;
    font-weight: 900;
  }
}
</style>
